Bootstrap 5 Button and JavaScript

1. Button Styles btn-xxxx

   Basic Primary Secondary Success Info Warning Danger Dark Light Link

2. Button Styles btn-outline-xxxx

   Basic Primary Secondary Success Info Warning Danger Dark Light Link

   image on button and onclick/onmouseover function

   

   Click me!

   

   Click to a Circle!

   

   

3. Button tags

   Link 送信

   card on button and click function

   

   Dragon

   Mr. Satoshi Kamiya folded the greatest dragon with just one piece of paper!

   Did you know him?

   YES NO

   

   ORIGAMI

   To change the picture? Click me!

   

   Kusudama

   30 units and hours are required for the Kusudama.

   Do you like it?

   YES NO

4. Button size

   Large button Small button

5. Disabled state

   ボタンを非アクティブに見せるには,button 要素に disabled を追加します。無効化されたボタンには pointer-events: none が適用され,ホバーやアクティブな状態がトリガーされるのを防ぎます.

   Primary button Button

6. Block buttons for レスポンシブスタック

   Button Button
   Button Button
   Button Button
   Button Button

7. Toggle states

   Toggle button Active toggle button Disabled toggle button

   Toggle link Active toggle link Disabled toggle link